<template>
  <div id="search-page" :style="{
    paddingTop:(this.getSafeArea().top)+'px'
  }">
    <div class="search-top-bar" :style="{top:(this.getSafeArea().top)+'px'}">
      <i class="icon el-icon-arrow-left" @click="$router.back()"></i>
      <el-input class="keyword-input" v-model="searchKeywords" placeholder="请输入您要搜索的关键词"  @keyup.enter.native="getList"></el-input>
      <button class="search-button" @click="getList">搜索</button>
      <button class="switch-button" @click="$router.push('/SearchResult')">
        <i class="el-icon-refresh"></i>
        <span>商品</span>
      </button>
    </div>

    <!--筛选栏-->
    <div class="filter-bar"  :style="{top:(this.getSafeArea().top+40)+'px'}">
      <div class="item" style="flex: 1"  @click="setOrder('distance7')">
        <span>距离</span>
        <template v-if="sortProp==='distance'">
          <i class="el-icon-caret-top" v-if="sortOrder==='ASC'"></i>
          <i class="el-icon-caret-bottom" v-if="sortOrder==='DESC'" ></i>
        </template>
      </div>

      <div class="item" style="flex: 2.5">
        <el-checkbox v-model="isSameCitySend">同城配送</el-checkbox>
      </div>
    </div>
    <i-scroller-box id="product-list" ref="i-scroller-box" :url="'Shop/getList'"
                    :height="this.getWinSize().height-this.getSafeArea().top-90"
                    :style="{paddingTop:'80px'}">
      <template v-slot:list-item="{index,data}">
        <shop-list-item :show-type="0" :shop="data" :index="index"></shop-list-item>
      </template>
    </i-scroller-box>
  </div>
</template>

<script>
import ProductListItem from "../common/ProductListItem";
import ShopListItem from '../common/ShopListItem'
import IScrollerBox from '../common/IScrollerBox'
export default {
  name: "SearchResult",
  components: {IScrollerBox, ShopListItem, ProductListItem},
  data:function (){
    return {
      searchKeywords:'',
      classifyName:'',
      isSameCitySend:'',
      shopList:[],
      productCateList:window.demoData.productCateList,
      sortProp:'distance',
      sortOrder:'ASC',
    }
  },
  mounted() {
    if (this.$route.query.searchKeywords && this.$route.query.searchKeywords.length>0){
      this.searchKeywords=this.$route.query.searchKeywords
      this.getList()
    }
    if (this.$route.query.sortProp && this.$route.query.sortProp.length>0){
      this.sortProp=this.$route.query.sortProp
      this.sortOrder=this.$route.query.sortOrder
      this.getList()
    }
    if (this.$route.query.distance && this.$route.query.distance.length>0){
      this.distance=this.$route.query.distance
      this.getList()
    }
    if (this.$route.query.act==='getList'){
      this.getList()
    }
  },
  methods:{
    setOrder:function (sortProp) {
      if (sortProp!==this.sortProp){
        this.sortOrder="DESC"
      }else{
        this.sortOrder=this.sortOrder==='DESC'?'ASC':'DESC'
      }
      this.sortProp=sortProp
      this.getList()
    },
    getList:function () {
      let $this = this
      var requestParams={
        name:$this.searchKeywords,
        sortProp: this.sortProp,
        sortOrder: this.sortOrder,
        pageSize: 10,
      }
      if ($this.isSameCitySend){
        requestParams.isSameCitySend=1
      }
      if ($this.distance){
        requestParams.distance=200000
      }
      // requestParams
      this.$refs['i-scroller-box'].getList({
        form:requestParams
      })
    }
  }
}
</script>

<style scoped>

</style>
